<template>
  <a-modal title="扫描解锁" v-model="open" width="500px" append-to-body :maskClosable="false" :footer="null" class="scan-modal">
    <p>使用微信扫描下方二维码，观看完广告获取验证码</p>
    <p class="red f13">注：如果第一次扫码未弹出广告，请重新扫码进入</p>
    <div class="flex-center">
      <img class="qr-code" :src="'data:image/png;base64,'+ miniImg"/>
      <a-input v-model="qrCode"/>
      <a-button @click="asyncOk" class="right-btn" type="primary" :disabled="!qrCode">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
import {getMiniWechatImg, judgeQrCode} from "@/api/otherPlat";

export default {
  data() {
    return {
      open: false,
      miniImg: null,
      qrCode: null
    }
  },
  methods: {
    initMiniWechatImg() {
      getMiniWechatImg({scene: 2}).then(res => {
        this.miniImg = res.data
      })
    },
    show() {
      this.initMiniWechatImg()
      this.open = true
    },
    async asyncOk(){
      const res = await judgeQrCode({code: this.qrCode}).then(res=>{
        return res.data
      })
      if (res) {
        this.open = false
      } else {
        this.$message.error('验证码错误')
      }
      this.$emit("confirmOk", res)
    }
  }
}
</script>

<style>
.scan-modal {
  .flex-center{
    display: flex;
    align-items: center;
  }
  .red{
    color: orangered;
  }
  .f13{
    font-size: 13px;
  }
  .qr-code {
    min-width: 150px;
    height: 150px;
    margin: 20px 20px 20px 0;
  }
  .ant-input{
    border-radius: 4px 0 0 4px !important
  }
  .right-btn {
    border-radius:0 4px 4px 0 !important;
  }
}

</style>
